<template>
  <div class="logDialog">
    <v-dialog title="任务调度日志" :show.sync="logVisible" class="logDialog" width="1400px">
      <basic-container v-loading="logLoading" element-loading-text="数据加载中...">
        <dataList ref="dispatchLog" :pageInfo="pager" :listData="tableData" :menuList="['export']" :listLayout="['menu']" @menu-click="handleLogClick">
          <div class="log-top" slot="customFilter">
            <el-form class="form-wrap" label-position="left" size="small" :model="searchFrom" label-width="85px">
              <el-form-item label="任务名称：" prop="jobName">
                <el-input v-halfCharCode maxlength="30" placeholder="请输入任务名称" v-model="searchFrom.jobName" clearable />
              </el-form-item>
              <el-form-item label="状态：" prop="isSuccess">
                <el-select clearable placeholder="请选择状态" v-model="searchFrom.isSuccess">
                  <el-option v-for="item in isLogSuccess" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="log-btn">
              <el-button type="primary" size="small" class="btn" @click="handleFilter">查询</el-button>
              <el-button size="small" class="btn" @click="handleReset">重置</el-button>
            </div>
          </div>
          <el-table :data="tableData" align="left" ref="multipleTable">
            <el-table-column label="序号" type="index" :index="getIndex" width="55" />
            <el-table-column label="日志ID" prop="id" width="120" align="left" />
            <el-table-column label="任务名称" prop="jobName" width="120" align="left" />
            <el-table-column label="Bean名称" prop="beanName" width="120" align="left" />
            <el-table-column label="执行方法" prop="methodName" width="120" align="left" />
            <el-table-column label="参数" prop="params" width="120" align="left" />
            <el-table-column label="cron表达式" prop="cronExpression" width="120" align="left" />
            <el-table-column label="耗时（毫秒）" prop="time" width="120" align="left" />
            <el-table-column label="状态" prop="isSuccess" width="120" align="left">
              <template slot-scope="scope">{{scope.row.isSuccess === true ? '成功' : '失败'}}</template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="120" align="left" />
            <el-table-column width="120" label="操作" fixed="right" align="left">
              <template slot-scope="scope">
                <el-button type="text" @click="handleLogLook(scope.row,scope.index)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </dataList>
      </basic-container>
      <v-dialog title="查看" :show.sync="dialogInner" width="1000px" v-if="dialogInner" append-to-body>
        <div class="dialogInner">
          <el-form ref="innerDictForm" :model="innerForm" label-width="120px" class="form-wrap">
            <el-form-item label="日志ID" prop="id">
              <span class="in_txt">{{innerForm.id}}</span>
            </el-form-item>
            <el-form-item label="任务名称" prop="jobName">
              <span class="in_txt">{{innerForm.jobName}}</span>
            </el-form-item>
            <el-form-item label="Bean名称" prop="beanName">
              <span class="in_txt">{{innerForm.beanName}}</span>
            </el-form-item>
            <el-form-item label="执行方法" prop="methodName">
              <span class="in_txt">{{innerForm.methodName}}</span>
            </el-form-item>
            <el-form-item label="参数" prop="params">
              <span class="in_txt">{{innerForm.params}}</span>
            </el-form-item>
            <el-form-item label="cron表达式" prop="cronExpression">
              <span class="in_txt">{{innerForm.cronExpression}}</span>
            </el-form-item>
            <el-form-item label="耗时（毫秒）" prop="time">
              <span class="in_txt">{{innerForm.time}}</span>
            </el-form-item>
            <el-form-item label="状态" prop="isSuccess">
              <span class="in_txt">{{innerForm.isSuccess === true ? '成功' : '失败'}}</span>
            </el-form-item>
            <el-form-item label="异常详情" prop="exceptionDetail" class="full">
              <span class="in_txt">{{innerForm.exceptionDetail}}</span>
            </el-form-item>
          </el-form>
        </div>
      </v-dialog>
    </v-dialog>
  </div>
</template>

<script>
import { logFetchList } from "@/admin/api/sys-quartz-log"
export default {
  name: "task-dispatch",
  provide () {
    return {
      initList: this.getLogList
    };
  },
  beforeMount () {
    this.getLogList()
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      // 日志
      logVisible: false,
      isLogSuccess: [
        {
          label: '成功',
          value: true
        }, {
          label: '失败',
          value: false
        }
      ],
      searchFrom: {
        jobName: '',
        isSuccess: ''
      },
      // 页面loading
      logLoading: false,
      // 字典子弹框
      dialogInner: false,
      dictId: '',
      dictType: '',
      innerForm: {
        id: '',
        jobName: '',
        beanName: '',
        methodName: '',
        params: '',
        cronExpression: '',
        time: '',
        isSuccess: '',
        exceptionDetail: ''
      }
    }
  },
  methods: {
    //日志弹框打开
    managementOpen () {
      // this.getLogList()
      this.logVisible = true
    },
    // 日志数据请求获取列表
    getLogList (params = {}) {
      this.logLoading = true;
      let requestData = { ...this.params, ...params };
      for (let key in requestData) {
        if (requestData[key] === '' || requestData[key] === null || requestData[key] === undefined) {
          requestData = {
            current: 1,
            size: 10
          }
        }
      }
      logFetchList(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.logLoading = false;
        });
    },
    // 日子字典项菜单点击监听
    handleLogClick (type) {
      switch (type) {
        case "export":
          this.publicExport('定时任务日志数据', '/admin/task/jobs/logs/download', this.params);
          break;
        default:
          this.$message(type);
          break;
      }
    },
    // 日志查询
    handleFilter () {
      if (this.searchFrom.isSuccess !== '' && this.searchFrom.jobName !== '') {
        this.params = {
          current: 1,
          size: 10,
          isSuccess: this.searchFrom.isSuccess,
          jobName: this.searchFrom.jobName
        }
        this.getLogList(this.params)
      } else if (this.searchFrom.isSuccess !== '' && this.searchFrom.jobName === '') {
        this.params = {
          current: 1,
          size: 10,
          isSuccess: this.searchFrom.isSuccess
        }
        this.getLogList(this.params)
      } else if (this.searchFrom.isSuccess === '' && this.searchFrom.jobName !== '') {
        this.params = {
          current: 1,
          size: 10,
          jobName: this.searchFrom.jobName
        }
        this.getLogList(this.params)
      } else {
        this.params = {
          current: 1,
          size: 10
        }
        this.getLogList(this.params)
      }
    },
    handleReset () {
      this.searchFrom.jobName = ''
      this.searchFrom.isSuccess = ''
      this.params = {
        current: 1,
        size: 10
      }
      this.getLogList(this.params)
    },
    // 日志查看
    handleLogLook (row, index) {
      this.innerForm = row
      this.dialogInner = true
    },
    // 获取索引值
    getIndex (index) {
      const { current = 0, size = 0 } = this.pager
      return (current - 1) * size + (index + 1)
    }
  }
}
</script>
<style scoped lang="scss">
.logDialog {
  /deep/ .el-dialog__body {
    padding: 0;
  }
  .log-top {
    @include formWrap(3);
    .form-wrap {
      padding: 0;
    }
    .log-btn {
      min-height: 60px;
      position: relative;
      .btn {
        position: absolute;
        top: 0;
      }
      .btn:nth-of-type(1) {
        right: 65px;
      }
      .btn:nth-of-type(2) {
        right: 0;
      }
    }
  }
}
.dialogInner {
  color: #f00 !important;
  @include formWrap(2);
  .in_txt {
    color: #999;
  }
}
</style>
